<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>后台涉及到的表的结构</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="panel panel-default">
    <div class="panel-heading"></div>
    <div class="wrapper">
        <div class="references">
            <h3>表名索引</h3>
            <div class="reference" th:each="e:${enums}"><a th:href="'#'+${e.key}" th:text="${e.title}"></a></div>
            <div class="reference" th:each="t:${tables}">
                <a th:href="'#'+${t.tableName}" th:text="${t.tableComment}"></a>
            </div>
        </div>
        <div class="tab"><h2>枚举参考</h2></div>
        <table class="table" th:each="e:${enums}" th:id="${e.key}">
            <caption th:text="${e.title}"></caption>
            <thead>
            <tr>
                <th>key</th>
                <th>code</th>
                <th>注释</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="c:${e.values}">
                <td th:text="${c}"></td>
                <td th:text="${c.code}"></td>
                <td th:text="${c.name}"></td>
            </tr>
            </tbody>
        </table>
        <div class="tab"><h2>所有的表参考</h2></div>
        <table th:each="t:${tables}" class="table" th:id="${t.tableName}">
            <caption><span th:text="${t.tableName}"></span> - <span th:text="${t.tableComment}"></span></caption>
            <thead>
            <tr>
                <th>序号</th>
                <th>字段名</th>
                <th>类型</th>
                <th>默认值</th>
                <th>是否可空</th>
                <th>备注</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="c:${t.columns}">
                <td th:text="${c.ordinalPosition}"></td>
                <td th:text="${c.columnName}"></td>
                <td th:text="${c.columnType}"></td>
                <td th:text="${c.columnDefault}"></td>
                <td th:text="${c.isNullable}"></td>
                <td th:text="${c.columnComment}"></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<style>
    .table {
        width: 800px;
        margin: 0 auto;
        border: 1px solid #aaa;
        border-collapse: collapse;
        font-family: Consolas;
        margin-bottom: 20px;
    }
    .table caption {
        font-size: 20px;
        font-weight: bold;
        color: #333;
        height: 40px;
        cursor: pointer;
    }
    .table th, .table td {
        border: 1px solid #aaa;
        border-collapse: collapse;
        padding: 4px 6px;
        font-size: 16px;
    }
    .table th {
        background-color: #dedede;

    }
    .tab {
        width: 800px;
        margin: 0 auto;
        height: 40px;
    }
    .tab h2 {
        border-left: 4px solid #333;
        height: 40px;
        line-height: 40px;
        text-indent: 10px;
        cursor: pointer;
    }
    .wrapper {
        width: 800px;
        margin: 0 auto;
        position: relative;
    }
    .references {
        width: 200px;
        position: absolute;
        top: 20px;
        right: -220px;
        border: 1px solid #aaa;
        border-radius: 5px;
        font-family: "Microsoft JhengHei";
        padding-bottom: 4px;
    }
    .references h3 {
        margin: 0;
        height: 30px;
        line-height: 30px;
        background: #aeaeae;
        font-size: 16px;
        font-family: "Adobe Fan Heiti Std B";
        text-align: center;
        border-bottom: 1px solid #aaa;
    }
    .reference {
        font-size: 14px;
        text-indent: 10px;
        padding: 0px 0 6px 0;
    }
    .reference a {
        color: blue;
    }
    .reference a:hover {
        color: cornflowerblue;
    }
</style>
</body>
</html>